<div class="row"> 
	<div class="profile-upper medium-10 medium-centered large-10 large-centered columns" style="margin-top:5rem;">
		<div class="cover-photo large-12 columns" data-equalizer>
			<div class="cover-left medium-4 large-4 text-center columns"data-equalizer-watch>
				<div class="medium-10 medium-centered column">
			      <div class="ch-item" style="height:16.5rem;border:solid 3px gray;border-radius:16.5rem;background: url(<?=$profile_pic?>);background-size:100% 100%;">
			        <div class="ch-info change_pic" ><!--<?= $profile_pic ?>-->
			            <h5><a style="color:white;" data-reveal-id="changeprimarydp">Change Picture</a></h5>
			              <p>May 12, 2014 3:00 PM <a>Last Edit</a></p>
			         </div>
			      </div>		
				</div>
				<div id="myforumrate" data-average="10" data-id="3" style="margin:0 auto;margin-top:1.5rem !important;"></div>
				<small>Rating</small>
				<h4 style="margin-top:.25rem;"><strong><?=$info->fname.' '.$info->lname ?></strong></h4>

				<ul class="text-left">
					<?php if($work_experience->work_description != '' && $work_experience->work_description){ ?>
					<li><img src="<?=BASE_URI?>img/icons/FinalJobIcon.png"> <a target="_blank" href="<?=BASE_URI?>"> <?= $work_experience->work_description ?> at <a target="_blank" href="<?=BASE_URI?>reviews?cname=<?=$work_experience->company?>"><?= $work_experience->company;?></a>
					</li>
					<?php }else { ?> <li><a><img src="<?= BASE_URI.'img/icons/AboutJobIcon.png' ?>" /> Add your work experience</a></li> <?php } ?>
					<?php if($address->city) { ?>
					<li><img src="<?=BASE_URI?>img/icons/FinalLocationIcon.png"> <?=$address->city?> City, Philippines
					</li> <?php }else{ ?><li><img src="<?= BASE_URI.'img/icons/AboutLocationIcon.png' ?>" /><a> Add your location</a></li><?php }?>		
					
				</ul>
			</div>
			<div id="cover_photo" class="cover-right medium-8 large-8 columns" data-equalizer-watch style="background:#555555 url(<?php echo BASE_URI; ?>img/cover_photo/2_compress.jpg);background-size:100% 100%;">
				<div class="medium-6 large-6 column" style="padding:0;">
					<div class="medium-6 column" style="padding:0;">
						<div class="editcov">
						<i class="fa fa-camera fa-lg"></i>					
						<a class="edit-covtxt">&nbsp;Edit Cover Photo</a>
						</div>					
					</div>
				</div>
					<?php 
					$isConnected = UserConnectionsTb::checkIfConnected($this->session->get('user_id'),$_GET['bhd']);
					$isAlreadySent = ConnectionRequestTb::checkIfAlreadySent($this->session->get('user_id'),$_GET['bhd']);
					if(($this->session->get('user_id') != $_GET['bhd'])){ ?>	
				<div class="text-right medium-6 large-6 column" style="padding:.5rem 0 0 0;">							
					<ul class="btngrp button-group">
					<?php if($isConnected == false && $isAlreadySent == false){ ?>
					  <li class="btnconnnect"><a  class ="btnConnect" href="#" class="tiny button"><i class="fa fa-user fa-lg"></i> Connect</a></li>
					<?php } ?>
					  <li class="btnmessage"><a href="#" class="tiny button">Message</a></li>
					  <li class="btnmore"><a href="#" class="tiny button"><i class="fa fa-circle"></i>&nbsp;<i class="fa fa-circle"></i>&nbsp;<i class="fa fa-circle"></i></a></li>
					</ul>
					<!--<a class="radius tiny button" style="margin-top:1rem;background:#009EA1;">Save</a>-->
				</div>
				<?php }//end of if?>	
				<div class="opacity-btm text-center large-12 column">
					<div class="borded tabbed medium-3 large-3 column">
						<div class="large-2 column" style="padding:0;margin-top:.1rem;">
							<img src="<?=BASE_URI?>img/icons/TabPostIcon.png">
						</div>
						<div class="large-10 column">
							<a href="<?= BASE_URI ?>profile?bhd=<?=$_GET['bhd']?>"><h5 id="total_posts"><?= UserFeedsTb::countPosts($_GET['bhd']); ?> posts</h5></a>
						</div>
					</div>
					<div class="borded tabbed medium-4 large-4 column">
						<div class="large-2 column" style="padding:.2rem;margin-top:.1rem;">
						<img src="<?=BASE_URI?>img/icons/TabConnectionIcon.png">
						</div>
						<div class="large-10 column">
							<a id="contab" href="<?= BASE_URI ?>profile/myconnection?bhd=<?=$_GET['bhd']?> "><h5><?= UserConnectionsTb::countConnnections($_GET['bhd']); ?> connections</h5></a>
						</div>
					</div>
					<div class="borded tabbed medium-3 large-3 column">
						<div class="large-2 column" style="padding:.2rem;margin-top:.1rem;">
							<img src="<?=BASE_URI?>img/icons/TabGroupFeedsIcon.png">
						</div>
						<div class="large-10 column">
							<a id="grouptab" href="<?= BASE_URI ?>profile/group?bhd=<?=$this->session->get('bhd_id')?>"><h5><?= Groups::countGroups($_GET['bhd']) ?> groups</h5></a>
						</div>
					</div>
					<div class="tabbed medium-2 large-2 column">
						<a style="font-size:.4rem;" id="threadtab" href="<?= BASE_URI ?>profile/thread?bhd=<?=$this->session->get('bhd_id')?>"><h5><?= Threads::countMyThreads($_GET['bhd']) ?> threads</h5></a>
					</div>
  				</div>
			</div>
		</div>
	</div>
</div>


<style type="text/css">
.changepic {
	position:absolute;
	width:100%;
	left:0;
	height:100%;
	background:rgba(0,0,0,.6);
	border-radius:12.47rem;   
	border: solid #009EA1 4px; 
		transition: background 0.2s ease,
    	padding 0.8s linear,
    	border 0.21s ease;	
}
.showiconX {
    transition:  0.2s ease;
    color:#009EA1 !important; position: absolute;
    font-size: 5rem;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
.transX {
  color:transparent !important;
  font-size: 7rem;
}
</style>

<script type="text/javascript">
  $('#change-pic').hover(
    function(){ $(this).addClass('changepic') },
    function(){ $(this).removeClass('changepic') }
  )
  $('#change-pic').hover(
    function(){ $('#dpxmain').addClass('showiconX').removeClass('transX') },
    function(){ $('#dpxmain').removeClass('showiconX').addClass('transX') }
)
</script>

	<!-- JS to add -->
<script type="text/javascript">
  $(function(){
  		if(SS_USER_ID != "<?=$_GET['bhd']?>"){ $('.change_pic').hide(); }

		function insertRequest(friend_id)
		{
			var params = {};
			params.receiver_id = friend_id;
			return $.ajax({
				url: URL + 'connections/requestConnection',
				type: 'post',
				data: params,
				dataType: 'json'
			});
		}

  		$('.btnConnect').click(function(){
  			 var friend_id = "<?=$_GET['bhd']?>";
  			 $(this).text('Sending . . .');
			if(friend_id){
				insertRequest(friend_id).done(function(result){
					if(result.status == true)
					{

						window.location.reload();
					}
					else
					{
						me.text(result.messages);
					}
				});
			}

  		});
  		$(document).ready(function(){
			$("#myforumrate").jRating({
			  isDisabled : true,
			  length : 5, // nb of stars
			  decimalLength:1 // number of decimal in the rate
			});
		});
  });
  
</script>